<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="120px">
				<el-form-item label="返回码类型" prop="type">
					<el-select v-model="dialog.addOrEdit.form.type" filterable placeholder="请选择返回码类型" width="100%">
						<el-option v-for="(value, key, index) in options.type" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="返回码名称" prop="name">
					<el-input v-model="dialog.addOrEdit.form.name" placeholder="请输入返回码名称" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="返回码值" prop="value">
					<el-input v-model="dialog.addOrEdit.form.value" placeholder="请输入返回码值" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="返回码状态" prop="status">
					<el-select v-model="dialog.addOrEdit.form.status" filterable placeholder="请选择返回码状态" width="100%">
						<el-option v-for="(value, key, index) in options.status" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit(beforeAdd, beforeAdd)">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds } from '@/api/middle-platform/conf-return-code';
import { returnCodeTypeOptions, returnCodeStatusOptions } from '@/views/management/middle-platform/select-option';

export default {
	name: 'ConfReturnCode',
	mixins: [Curd],
	props: {
		currentServiceId: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
			},
			// 下拉选项
			options: {
				// 返回码类型
				type: {},
				// 返回码状态
				status: {},
			},
			// 搜索表单
			formData: {
				pageSize: 10,
				pageNum: 1,
			},
			formOptions: [
				{
					type: 'input',
					prop: 'name',
					label: '返回码名称',
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '返回码类型',
						prop: 'type',
						formatter: (row: any, val: any) => {
							return this.options.type[val];
						},
					},
					{
						label: '返回码名称',
						prop: 'name',
					},
					{
						label: '返回码值',
						prop: 'value',
					},
					{
						label: '返回码状态',
						prop: 'status',
						formatter: (row: any, val: any) => {
							return this.options.status[val];
						},
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd() },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit() },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
				],
			},
			tableData: [],
		};
	},
	watch: {
		currentServiceId: {
			handler(newVal, oldVal) {
				this.formData.serviceId = newVal;
				this.handleSearch(null);
			},
			immediate: true,
		},
	},
	created() {
		// 返回码类型
		returnCodeTypeOptions().then((data: any) => {
			this.options.type = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
			Object.keys(this.options.type).forEach((key: string) => {
				if (this.options.type[key] === '系统返回码') {
					delete this.options.type[key];
				}
			});
		});
		// 返回码状态
		returnCodeStatusOptions().then((data: any) => {
			this.options.status = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
			Object.keys(this.options.status).forEach((key: string) => {
				if (this.options.status[key] === '失败') {
					delete this.options.status[key];
				}
			});
		});
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			type: [{ required: true, message: '返回码类型不能为空', trigger: 'change' }],
			name: [{ required: true, message: '返回码名称不能为空', trigger: 'blur' }],
			value: [{ required: true, message: '返回码值不能为空', trigger: 'blur' }],
			status: [{ required: true, message: '返回码状态不能为空', trigger: 'change' }],
		};
	},
	methods: {
		beforeAdd() {
			this.dialog.addOrEdit.form.serviceId = this.currentServiceId;
		},
	},
};
</script>

<style scoped></style>
